<!--
* @description gmm大数据汇总表
* @fileName gmm.vue
* @author huangyu
* @date 2022/06/11 14:39:39
!-->
<template>
    <div class="gmmContainer" :style="{height:menuHeight+'px'}">
        <div class="header"><h1>GMM大数据账号分析</h1></div>
        <h4>每周三更新数据</h4>
        <div class="ZhiYeMain">
            <el-row>
                <el-col v-for="(item,index) in JobCountList" :key="index" :span="3">
                    <div class="list">
                        <div class="name">{{zyList[Number(item._id)-1]}}</div>
                        <div class="count">{{item.count}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="groupContainer">
            <el-row>
            <el-col :span="6">
                <ul class="groupName">
                    <li @click="clickGroup(one)">{{one._id}} <strong>{{one.count}}</strong></li>
                    <li @click="clickGroup(two)">{{two._id}} <strong>{{two.count}}</strong></li>
                    <li @click="clickGroup(three)">{{three._id}} <strong>{{three.count}}</strong></li>
                    <li @click="clickGroup(four)">{{four._id}} <strong>{{four.count}}</strong></li>
                    <li @click="clickGroup(five)">{{five._id}} <strong>{{five.count}}</strong></li>
                    <li @click="clickGroup(six)">{{six._id}} <strong>{{six.count}}</strong></li>
                    <li @click="clickGroup(seven)">{{seven._id}} <strong>{{seven.count}}</strong></li>
                </ul>
            </el-col>
            <el-col :span="18">
                <div class="groupNameMain">
                    <!-- {{GroupNameModle}} -->
                    <h2>{{groupName}}</h2>
                    <el-row>
                        <el-col :span="12">
                            <div class="title">天族</div>
                            <el-row>
                                <el-col :span="8">
                                    <div class="groupNameBox" @click="clickGroupDetail(TianModel.CountBaiT.data,'天族 精百')">
                                        <strong>{{TianModel.CountBaiT.data.length}}</strong>
                                        <span>精百</span>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="groupNameBox" @click="clickGroupDetail(TianModel.CountQianT.data,'天族 精千')">
                                        <strong>{{TianModel.CountQianT.data.length}}</strong>
                                        <span>精千</span>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="groupNameBox" @click="clickGroupDetail(TianModel.CountTaT.data,'天族 塔武')">
                                        <strong>{{TianModel.CountTaT.data.length}}</strong>
                                        <span>塔武</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="12">
                            <div class="title">魔族</div>
                            <el-row>
                                <el-col :span="8">
                                    <div class="groupNameBox" @click="clickGroupDetail(MoModel.CountBaiM.data,'魔族 精百')">
                                        <strong>{{MoModel.CountBaiM.data.length}}</strong>
                                        <span>精百</span>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="groupNameBox" @click="clickGroupDetail(MoModel.CountQianM.data,'魔族 精千')">
                                        <strong>{{MoModel.CountQianM.data.length}}</strong>
                                        <span>精千</span>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="groupNameBox" @click="clickGroupDetail(MoModel.CountTaM.data,'魔族 塔武')">
                                        <strong>{{MoModel.CountTaM.data.length}}</strong>
                                        <span>塔武</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
                </el-col>
            </el-row>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogGMM" top="50px" width="1180px">
            <el-table :data="list" highlight-current-row width="100%" border max-height="650px">
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column label="名称" prop="p_name">
                    <template slot-scope="scope">
                        <a style="cursor:pointer;" class="color_blue" :href="`https://www.gmmsj.com/dy/78_zh/detail_${scope.row.book_id}.shtml`" target="_blank">{{scope.row.p_name}}</a>
                    </template>
                </el-table-column>
                <el-table-column label="服务器" prop="group_name" width="100"></el-table-column>
                <el-table-column label="职业" prop="p_job" width="100">
                    <template slot-scope="scope">
                        {{zyList[scope.row.p_job-1]}}
                    </template>
                </el-table-column>
                <el-table-column label="种族" prop="p_race" width="100">
                    <template slot-scope="scope">
                        {{scope.row.p_race==1?'天族':'魔族'}}
                    </template>
                </el-table-column>
                <el-table-column label="等级" prop="p_level" width="100"></el-table-column>
                <el-table-column label="更新时间" prop="update_time" width="100" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="性别" prop="p_sex" width="100">
                    <template slot-scope="scope">
                        {{scope.row.p_sex==1?'男':'女'}}
                    </template>
                </el-table-column>
                <el-table-column label="价格" prop="price" width="120">
                    <template slot-scope="scope">
                        <strong class="color_danger">￥{{scope.row.price}}</strong>
                    </template>
                </el-table-column>
           </el-table>
        </el-dialog>
    </div>
</template>

<script>
import '@/assets/less/aion.less'
import { get } from '@/common/app.js'
export default {
    props:{
        
    },
    components: {},
    data() {
        return {
            menuHeight: document.documentElement.clientHeight,
            
            zyList: ['剑星','守护星','杀星','弓星','魔道星','精灵星','治愈星','护法星'],
            fwqList: ['永恒之巅','谁与争锋','永恒之岛','红龙祭坛','火之神殿','八星争霸','王者之巅'],
            JobCountList: [], // 按职业汇总
            GroupNameCounList: [], // 按服务器汇总
            drawerGMM: false,
            dialogGMM: false,
            dialogTitle: '',
            list: [],
            groupName: "",
            
            TianModel: {
                CountBaiT: {data:[]},
                CountQianT: {data:[]},
                CountTaT: {data:[]},
            },
            MoModel: {
                CountBaiM: {data:[]},
                CountQianM: {data:[]},
                CountTaM: {data:[]},
            },

            isActive: true,
            one: {},
            two: {},
            three: {},
            four: {},
            five: {},
            six: {},
            seven: {},
        }
    },
    mounted() {
        // this.getDataWQ()
        this.getDataJobCount()
    },
    methods: {
        getDataJobCount(){
            let params = {
                type: 'getAionGMM',
                data: {
                    type: 'getJobCount',
                    pageIndex: 1,
                    pageSize: 20,
                },
            }
            get('game',params).then(res=>{
                if(res){
                    // console.log(res)
                    let jobList = []
                    this.JobCountList = res.jobCount.data
                    this.JobCountList.forEach(item=>{
                        if(item._id<9){
                            jobList.push(item)
                        }
                    })
                    this.JobCountList = jobList
                    this.GroupNameCounList = res.GroupNameCount.data.reverse()
                    
                    this.one = this.groupNameObj(this.fwqList[0])
                    this.two = this.groupNameObj(this.fwqList[1])
                    this.three = this.groupNameObj(this.fwqList[2])
                    this.four = this.groupNameObj(this.fwqList[3])
                    this.five = this.groupNameObj(this.fwqList[4])
                    this.six = this.groupNameObj(this.fwqList[5])
                    this.seven = this.groupNameObj(this.fwqList[6])

                    this.one.isActive = true
                    // 默认返回 一区的统计
                    this.getDataGroupName(this.one._id)
                    this.groupName = this.one._id
                }
            })
        },

        clickGroup(row){
            this.groupName = row._id
            this.getDataGroupName(row._id)
        },

        getDataGroupName(group_name){
            let params = {
                type: 'getAionGMM',
                data: {
                    type: 'getCount',
                    group_name: group_name,
                },
            }
            get('game',params).then(res=>{
                if(res){
                    // console.log(res)
                    this.TianModel = res.TianModel
                    this.MoModel = res.MoModel
                }
            })
        },
        groupNameObj(name){
            let res = {}
            this.GroupNameCounList.forEach(item=>{
                if(item._id==name){
                    res = item
                }
            })
            return res
        },

        clickGroupDetail(list,title){
            this.dialogTitle = title
            this.list = list
            this.dialogGMM = true
        },
    },
}
</script>

<style scoped>
</style>